<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>JavaScript Bs_Slider example 9</title>

<style>
  .sliderInput {
  	height:20;
    width:40;
  	font-family : Arial, Helvetica, sans-serif;
  	font-size : 12px;
  }
  .smallTxt {
    font-size: 12px;
  }
</style>


<script type="text/javascript" src="../../../lib/LibCrossBrowser.js"></script>
<script type="text/javascript" src="../../../lib/EventHandler.js"></script>
<script type="text/javascript" src="../../../core/form/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="../../../core/gfx/Bs_ColorUtil.lib.js"></script>
<script type="text/javascript" src="../Bs_Slider.class.js"></script>


<script type="text/javascript"><!--
function init() {
  // - Slider 1 -----------------------------------------
  mySlider1 = new Bs_Slider();
  mySlider1.width         = 121;
  mySlider1.height        = 26;
	mySlider1.imgDir = '../img/';
  mySlider1.setBackgroundImage('bob/background.gif', 'no-repeat');
  mySlider1.attachOnChange(bsSliderChange);
	
	mySlider1.fieldName     = 'slider1_start';
  mySlider1.minVal        = 0;
  mySlider1.maxVal        = 10;
  mySlider1.valueInterval = 1;
  mySlider1.valueDefault  = 4;
  mySlider1.setSliderIcon('bob/slider.gif', 13, 18);
  mySlider1.useInputField = 2;
  mySlider1.styleValueFieldClass = 'sliderInput';
  mySlider1.colorbar = new Object({ color:'blue', height:5, widthDifference:-30, offsetLeft:5, offsetTop:9 });
	
	mySlider1.useSecondKnob  = true;
	mySlider1.wheelAmount    = 0; //disable mouse wheeling cause we have 2 knobs.
	
	mySlider1.fieldName2     = 'slider1_end';
  mySlider1.minVal2        = 0;
  mySlider1.maxVal2        = 10;
  mySlider1.valueInterval2 = 1;
  mySlider1.valueDefault2  = 8;
  mySlider1.setSliderIcon2('bob/slider.gif', 13, 18);
  mySlider1.useInputField2 = 2;
  mySlider1.styleValueFieldClass2 = 'sliderInput';
  mySlider1.colorbar2 = new Object({ color:'blue', height:5, widthDifference:-18, offsetLeft:28, offsetTop:9 });
	
  mySlider1.drawInto('sliderDiv1');
	
	
	
  // - Slider 2 -----------------------------------------
  mySlider2 = new Bs_Slider();
  mySlider2.width         = 516;
  mySlider2.height        = 56;
	mySlider2.imgDir = '../img/';
  mySlider2.setBackgroundImage('yardstick/background.gif', 'no-repeat');
	
	mySlider2.fieldName     = 'slider2_start';
  mySlider2.minVal        = 0;
  mySlider2.maxVal        = 500;
  mySlider2.valueInterval = 1;
  mySlider2.valueDefault  = 50;
  mySlider2.setSliderIcon('bob/slider.gif', 13, 18);
  mySlider2.useInputField = 3;
  mySlider2.styleValueFieldClass = 'sliderInput';
  mySlider2.colorbar = new Object({ color:'#FFFF00', height:20, widthDifference:-34, offsetLeft:6, offsetTop:37 });
	
	mySlider2.useSecondKnob        = true;
	mySlider2.preventValueCrossing = true;
	mySlider2.wheelAmount        = 0; //disable mouse wheeling cause we have 2 knobs.
	
	mySlider2.fieldName2     = 'slider2_end';
  mySlider2.minVal2        = 0;
  mySlider2.maxVal2        = 500;
  mySlider2.valueInterval2 = 1;
  mySlider2.valueDefault2  = 400;
  mySlider2.setSliderIcon2('bob/slider.gif', 13, 18);
  mySlider2.useInputField2 = 3;
  mySlider2.styleValueFieldClass2 = 'sliderInput';
  mySlider2.colorbar2 = new Object({ color:'orange', height:20, widthDifference:-21, offsetLeft:27, offsetTop:37 });
	
  mySlider2.drawInto('sliderDiv2');
	
	
	
  // - Slider 3 -----------------------------------------
  mySlider3 = new Bs_Slider();
  mySlider3.width         = 516;
  mySlider3.height        = 56;
	mySlider3.imgDir        = '../img/';
  mySlider3.setBackgroundImage('yardstick/background.gif', 'no-repeat');
	
	mySlider3.fieldName     = 'slider3_start';
  mySlider3.minVal        = 0;
  mySlider3.maxVal        = 500;
  mySlider3.valueInterval = 1;
  mySlider3.valueDefault  = 50;
  mySlider3.setSliderIcon('bob/slider.gif', 13, 18);
  mySlider3.useInputField = 3;
  mySlider3.styleValueFieldClass = 'sliderInput';
	
	mySlider3.useSecondKnob        = true;
	mySlider3.preventValueCrossing = true;
	mySlider3.wheelAmount        = 0; //disable mouse wheeling cause we have 2 knobs.
	
	mySlider3.fieldName2     = 'slider3_end';
  mySlider3.minVal2        = 0;
  mySlider3.maxVal2        = 500;
  mySlider3.valueInterval2 = 1;
  mySlider3.valueDefault2  = 400;
  mySlider3.setSliderIcon2('bob/slider.gif', 13, 18);
  mySlider3.useInputField2 = 3;
  mySlider3.styleValueFieldClass2 = 'sliderInput';
	
  mySlider3.colorbar = new Object({ type:'between', color:'red', offsetLeft:6, height:20, offsetTop:37 });
	
  mySlider3.drawInto('sliderDiv3');
}

/**
* @param object sliderObj
* @param int val (the value)
* @param int newPos
* @param int knobNo
*/
function bsSliderChange(sliderObj, val, newPos, knobNumber) { 
	document.getElementById('slider1knob'+knobNumber).value = val;
}
// --></script>

</head>
<body bgcolor="#FFFFFF" text="#3366AA" link="#0000EE" vlink="#551A8B" alink="#FF0000" onLoad="init();">

<h1>JavaScript Bs_Slider example 9</h1>

This is an example of the <a href="http://www.blueshoes.org/en/javascript/slider/" target="_blank">Slidebar Control</a>.
<br><br>

<ul>
	<li>Using two knobs.</li>
	<li>Slider 1 has an attachOnChange event. The input fields at the bottom of the page are updated on any change.</li>
	<li>Slider 2 and 3: values may not overlap.</li>
	<li>Slider 3: the color range is used as an "in between" color bar.</li>
	<li>Mouse wheeling is not possible (which knob would be wheeled?)</li>
	<li>Clicking into the slider: when clicking left of the left node, the left node is moved. Same with the right. But when clicked in between then nothign is done.</li>
</ul>

<hr>
<br>


<form  name="test" id="test" action="http://www.blueshoes.org/postDump.php" method="post">
	<div id="sliderDiv1" style="width:200px; height:23px; border:1px solid gray;"></div><br>
	<div id="sliderDiv2" style="width:600px; height:62px; border:1px solid gray;"></div><br>
	<div id="sliderDiv3" style="width:600px; height:62px; border:1px solid gray;"></div><br>
	<input type="submit" name="btnSubmit"  value="submit"> 
	<input type="button" name="btnDisable" value="disable slider 2" onclick="mySlider2.setDisabled(true);"> 
	<input type="button" name="btnEnable"  value="enable slider 2"  onclick="mySlider2.setDisabled(false);"> 
</form>

Slider 1 knob 1: <input type="text" name="slider1knob1" id="slider1knob1" size="2"><br>
Slider 1 knob 2: <input type="text" name="slider1knob2" id="slider1knob2" size="2"><br>


</body></html>
